<template>
  <div id="main" style="height:100%;width:100%;"></div>
</template>

<script>
export default {
  
  mounted() {
    this.initSomething();
  },
  methods: {
    initSomething() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        backgroundColor: "#000",
        globe: {
          baseTexture: ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
          heightTexture:
            ROOT_PATH + "/data-gl/asset/world.topo.bathy.200401.jpg",
          displacementScale: 0.04,
          shading: "realistic",
          environment: ROOT_PATH + "/data-gl/asset/starfield.jpg",
          realisticMaterial: {
            roughness: 0.9,
          },
          postEffect: {
            enable: true,
          },
          light: {
            main: {
              intensity: 5,
              shadow: true,
            },
            ambientCubemap: {
              texture: ROOT_PATH + "/data-gl/asset/pisa.hdr",
              diffuseIntensity: 0.2,
            },
          },
        },
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>